<template>
  <div id="login">
    <div class="login-container">
      <h3 class="title">
       登录
      </h3>
      <!-- <div class="toggle fb">
        <span @click="toggle = true" :class="toggle ? 'active' : ''">短信登录</span>
        <span @click="toggle = false" :class="!toggle ? 'active' : ''">密码登录</span>
      </div> -->
      <!-- 手机号登录 -->
      <!-- <el-form v-if="toggle" label-position="left" :model="ruleForm" ref="ruleForm2" :rules="rules">
        <el-form-item prop="phone" key="4">
          <el-input prefix-icon="el-icon-mobile-phone" type="text" v-model="ruleForm.phone" placeholder="请输入手机号">
          </el-input>
        </el-form-item>
        <slideVerify  @sliderStatus="sliderStatus" key="8" />
        <el-form-item prop="code" key="5">
          <el-input prefix-icon="el-icon-message" placeholder="短信验证码" v-model="ruleForm.code">
            <template slot="append">
              <button @click="resetTime('ruleForm2')"
                style="background: none;line-height: 58px;cursor: pointer;color: #56AAFF;" :disabled="disabled">
                {{ btnText }}
              </button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item style="width:100%;" key="6">
          <el-button type="primary" style="width:100%;" @click="loginTo('ruleForm2','1')">加入</el-button>
        </el-form-item>

        <div style="width:100%;margin-top: -10px;" class="fb">
          <el-checkbox class="remember" style="visibility:hidden"></el-checkbox>
          <div>
          </div>
        </div>
      </el-form> -->

      <!-- 密码登录 -->
      <el-form class="mt24" v-if="!toggle" label-position="left" :model="ruleForm" ref="ruleForm" :rules="rules">
        <el-form-item prop="phone2" key="1">
          <el-input prefix-icon="el-icon-mobile-phone" type="text" v-model="ruleForm.phone2" placeholder="请输入手机号">
          </el-input>
        </el-form-item>
        <el-form-item prop="password" key="2">
          <el-input prefix-icon="el-icon-lock" type="password" v-model="ruleForm.password" placeholder="请输入密码">
          </el-input>
        </el-form-item>
        <slideVerify  @sliderStatus="sliderStatus" key="7" />
        <el-form-item style="width:100%;" key="3">
          <el-button type="primary" style="width:100%;" @click="loginTo2('ruleForm','2')">加入</el-button>
        </el-form-item>
        <div style="width:100%;margin-top: -10px;" class="fb">
          <!-- <el-checkbox class="remember" v-model="rememberpwd"
            >记住密码
          </el-checkbox> -->
          <router-link style="visibility:hidden" tag="span" to="" class="regist">忘记密码</router-link>
          <div>
            <!-- <router-link tag="span" to="" class="regist">忘记密码</router-link
            >&emsp; -->
            <!-- <router-link tag="span" :to="{ path: '/register' }" class="regist">立即注册</router-link> -->
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { apiSendCode, apiLogin } from "@/utils/api";
import { setCookie, getCookie } from "../utils/util";
import slideVerify from "@/components/slideVerify.vue";
export default {
  name: "login",
  components: {
    slideVerify
  },
  data() {
    return {
      status: false,
      toggle: false,
      disabled: false,
      btnText: "发送验证码",
      rememberpwd: false,
      ruleForm: {
        //phone和password默认为空
        phone: "",
        phone2: "",
        password: "",
        code: "",
      },
      //rules前端验证
      rules: {
        // phone: [
        //   { required: true, message: "请输入手机号", trigger: "blur" },
        //   {
        //     pattern: /^(1[3-9])\d{9}$/,
        //     message: "输入的手机号不合法",
        //     trigger: "blur"
        //   }
        // ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        // phone2: [
        //   { required: true, message: "请输入手机号", trigger: "blur" },
        //   {
        //     pattern: /^(1[3-9])\d{9}$/,
        //     message: "输入的手机号不合法",
        //     trigger: "blur"
        //   }
        // ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      }
    };
  },
  created() {
    console.log(this.$router);
  },
  mounted() {},
  methods: {
    // 密码登录
    loginTo2(ruleForm2,typeLgin) {
      if(!this.status) {
        this.$message({ message: "请滑动验证码验证", type: "error" });
      } else {
        this.loginTo(ruleForm2,typeLgin)
      }
    },
    // 登录
    loginTo(ruleForm2,typeLgin) {
      this.$refs[ruleForm2].validate(valid => {
        if (valid) {
           apiLogin({
            type: typeLgin==1?2:1,
            userType: 0,
            phone: typeLgin==1? this.ruleForm.phone : this.ruleForm.phone2,
            password: typeLgin==1? this.ruleForm.code : this.ruleForm.password
          }).then(res=> {
            this.$store.commit('loginX',{token:res.data.token,name:res.data.user.companyName,phone:res.data.user.phone})
            this.$router.push("/home");
            this.$message({message: "登录成功",type: "success"});
          }).catch(error => {
            console.log(error);
          });
        } else {
          this.$message({ message: "请完善填写内容", type: "error" });
          return false;
        }
      });
    },
    // 倒计时
    resetTime() {
      if(!this.ruleForm.phone) {
        this.$message({ message: "请输入手机号", type: "error" });
      } else if(!this.status) {
        this.$message({ message: "请滑动验证码验证", type: "error" });
      } else {
        console.log('object');
        this.timer()
        apiSendCode({
          phone: this.ruleForm.phone
        }).then(res => {
          console.log(res);
        }).catch(error => {
          console.log(error);
        });
      }
    },
    timer() {
      let sendSMSTime = 60;
      this.disabled = true;
      this.btnText = `已发送${sendSMSTime}s`;
      // this.timer();
      let timer = setInterval(() => {
        sendSMSTime--;
      if (sendSMSTime > 0) {
        this.btnText = `已发送${sendSMSTime}s`;
      } else {
        sendSMSTime = 0;
         clearInterval(timer);
        this.btnText = "重新获取";
        this.disabled = false;
      }
      }, 1000);
    },
    // 接受滑动验证码状态
    sliderStatus(status) {
      this.status = status;
    },
  }
};
</script>
<style lang="scss">
#login {
  .el-input__inner {
    line-height: 60px;
    height: 60px;
  }
  .el-form-item {
    margin-bottom: 30px;
  }
  .el-button {
    height: 60px;
    font-size: 20px;
    border-radius: 10px;
    margin-top: 30px;
  }
  .el-input-group--append {
    margin-top: 30px;
  }
  .el-input-group__append {
    width: 68px;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
    color: $blue;
  }
}
</style>

<style lang="scss" scoped>
// @keyframes imgToggle {
//   0% {
//     background-image: url("../assets/img/homebg1.jpg");
//   }

//   100% {
//     background-image: url("../assets/img/homebg2.jpg");
//   }
// }

// .imgToggle {
//   animation-duration: 5s;
//   -webkit-animation-name: mslidedown;
//   animation-name: mslidedown;
//   animation-timing-function: cubic-bezier(1, 0.1, 0.4, 1);
// }
#login {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/homebg2.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  // background-size: 100%;
  position: relative;
  .login-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    width: 650px;
    padding: 70px 125px 55px;
    background: #fff;
    box-sizing: border-box;
    // border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0px 1px 25px 0px rgba(192, 192, 192, 0.75);
    .title {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
      line-height: 20px;
      opacity: 0.9;
      text-align: center;
    }
    .toggle {
      border-bottom: 1px solid #dcdfe6;
      margin-bottom: 30px;
      margin-top: 30px;
      span {
        cursor: pointer;
        line-height: 34px;
        color: rgba(0, 0, 0, 0.6);
      }
      .active {
        border-bottom: 1px solid $blue;
        color: rgba(0, 0, 0, 1);
        box-sizing: border-box;
        line-height: 33px;
      }
    }
    .regist {
      cursor: pointer;
      // color: $blue;
      font-size: 14px;
      &:hover {
        color: $blue;
      }
    }
  }
}
</style>
